<template>
  <div class="ranking">
    <div class="rank-head">
      <div style="font-size:20px;position:absolute;top:5%;left:35%;color:white;margin:0 auto;">师傅佣金排行榜</div>
      <div
        style="display:flex;flex-direction: column;width:30%;justify-content: center;align-items: center;margin-bottom:10px;">
        <img :src="Two_Top.tx_path" style="width:50%;border-radius:50%;height:55px;"/>
        <span style="font-size:16px;margin-top:5px;">{{Two_Top.name.substr(0,1)}}**</span>
        <span style="font-size:16px;margin-top:5px;color:rgb(244,116,5);">{{Two_Top.b_money}}</span>
      </div>
      <div
        style="display:flex;flex-direction: column;width:30%;justify-content: center;align-items: center;margin-bottom:30px;">
        <img :src="One_Top.tx_path" style="width:50%;border-radius:50%;height:55px;"/>
        <span style="font-size:16px;margin-top:5px;">{{One_Top.name.substr(0,1)}}**</span>
        <span style="font-size:16px;margin-top:5px;color:rgb(244,116,5);">{{One_Top.b_money}}</span>
      </div>
      <div
        style="display:flex;flex-direction: column;width:30%;justify-content: center;align-items: center;margin-bottom:10px;">
        <img :src="Three_Top.tx_path" style="width:50%;border-radius:50%;height:55px;"/>
        <span style="font-size:16px;margin-top:5px;">{{Three_Top.name.substr(0,1)}}**</span>
        <span style="font-size:16px;margin-top:5px;color:rgb(244,116,5);">{{Three_Top.b_money}}</span>
      </div>
    </div>
    <div class="rank-foot">
      <div v-if="Object.keys(Urankig).length>0"
        style="display:flex;align-items: center;margin-top:10px;justify-content: space-around;border-bottom:1px solid #bababa;padding-bottom:10px;">
        <span style="font-size:16px;">{{Urankig.rankig}}</span>
        <img :src="Urankig.tx_path" alt="" style="width:50px;height:50px;border-radius:50%;">
        <span style="font-size:16px;">{{Urankig.name.substr(0,1)}}**</span>
        <span style="font-size:16px;">师傅佣金：{{Urankig.b_money}}</span>
      </div>
      <div v-else style="width:57%;font-size:18px;margin:20px auto">
         <span>暂不是师傅，请先升级为师傅</span>
      </div>
      <div v-for="i in tabData"
        style="display:flex;align-items: center;margin-top:10px;justify-content: space-around;border-bottom:1px solid #bababa;padding-bottom:10px;">
        <span style="font-size:16px;">{{i.rankig}}</span>
        <img :src="i.tx_path" alt="" style="width:50px;height:50px;border-radius:50%;">
        <span style="font-size:16px;">{{i.name.substr(0,1)}}**</span>
        <span style="font-size:16px;">师傅佣金：{{Math.round(i.b_money)}}</span>
<!--        <span style="font-size:16px;color:rgb(244,116,5);font-weight:600;">200单</span>-->
      </div>
    </div>
  </div>
</template>

<script>
  import {RankList} from '../api/api';
  export default {
    name: "ranking",
    data() {
      return {
        One_Top: "",
        Two_Top: "",
        Three_Top: "",
        tabData: [],
        Urankig:{}
      }
    },
    methods: {
      RankList() {
        RankList().then((res) => {
          this.tabData =  res.Rankig
          this.One_Top = this.tabData.shift()
          this.Two_Top = this.tabData.shift()
          this.Three_Top = this.tabData.shift()
          this.Urankig = res.Urankig
        })
      }
    },
    created() {
      this.RankList()
    }
  }
</script>

<style>
  .ranking {
    width: 100%;
    height: 100%;
  }

  .rank-head {
    width: 100%;
    display: flex;
    height: 300px;
    justify-content: space-around;
    align-items: flex-end;
    background: url("../assets/ranking.png");
    background-size: 100% 100%;
  }

  .rank-foot {

  }
</style>
